{% extends 'base_user.html' %}
{% block head %}
    <!--suppress ALL -->
    <script>
        $(function () {
            total1();
            $('.add').click(function () {
                const txt = $(this).next();
                txt.val(parseFloat(txt.val()) + 1).blur();
            });
            $('.minus').click(function () {
                const txt = $(this).prev();
                txt.val(parseFloat(txt.val()) - 1).blur();
            });
            $('.num_show').blur(function () {
                var count = $(this).val();
                if (count <= 0) {
                    alert('请输入正确的数量');
                    $(this).val('1').focus();
                    return;
                } else if (count > 100) {
                    alert('数量不能超过100');
                    $(this).val('100').focus();
                    return;
                }
                var cart_id = $(this).parents('.cart_list_td').attr('id');
                $.get('/cart/edit' + cart_id + '_' + count + '/', function (data) {
                    if (data.ok === 0) {
                        total1();
                    } else {
                        $(this).val(data.ok);
                    }
                });
                total1();
            });
            //全选
            $('#check_all').click(function () {
                const state = $(this).prop('checked');
                $(':checkbox:not(#check_all)').prop('checked', state);
            });
            //选择
            $(':checkbox:not(#check_all)').click(function () {
                if ($(this).prop('checked')) {
                    if ($(':checked').length + 1 === $(':checkbox').length) {
                        $('#check_all').prop('checked', true);
                    }
                } else {
                    $('#check_all').prop('checked', false);
                }
            });
            $('.col04 a').click(function () {
                let s = [];
                const list = $(':checkbox:not(#check_all)').parents('.cart_list_td');
                {#console.log(list.length);#}
                for (let i=0; i<list.length; i++){
                    s.push('cart_id='+list[i].id);
                }

                s = s.join('&');
                s = $(this).attr('href') + s;
                $(this).attr('href',s);
            });
        });

        function total1() {
            var total_all = 0;
            var total_count = 0;
            $('.col07').each(function () {
                var count = $(this).prev().find('input').val();
                count = parseFloat(count);
                var price = $(this).prev().prev().text();
                price = parseFloat(price);
                var total = count * price;
                $(this).text(total.toFixed(2)+'元');
                total_all += total;
                total_count++;
            });
            $('#total').text(total_all.toFixed(2));
            $('.count').text(total_count);
        }

        function cart_del(cart_id) {
            var del = confirm('确定要删除吗？');
            console.log(del);
            if (del) {
                $.get('/cart/delete' + cart_id + '/', function (data) {
                    if (data.ok === 1) {
                        $('ul').remove('#' + cart_id);
                        total1();
                    }

                });
            }

        }
    </script>
{% endblock %}
{% block con %}
    <div class="total_count">全部商品<em class="count">2</em>件</div>
    <ul class="cart_list_th clearfix">
        <li class="col01">商品名称</li>
        <li class="col02">商品单位</li>
        <li class="col03">商品价格</li>
        <li class="col04">数量</li>
        <li class="col05">小计</li>
        <li class="col06">操作</li>
    </ul>
    {% for cart in carts %}
        <ul class="cart_list_td clearfix" id="{{ cart.id }}">
            <li class="col01"><input type="checkbox" name="" checked></li>
            <li class="col02"><img src="/media/{{ cart.goods.gpic }}"></li>
            <li class="col03">
                {{ cart.goods.gtitle }}<br>
                <em>{{ cart.goods.gprice }}元/{{ cart.goods.gunit }}</em><br>
                <span style="color: red">库存:{{ cart.goods.gkucun }}</span>
            </li>
            <li class="col04">{{ cart.goods.gunit }}</li>
            <li class="col05">{{ cart.goods.gprice }}</li>
            <li class="col06">
                <div class="num_add">
                    <a href="javascript:;" class="add fl">+</a>
                    <input type="number" class="num_show fl" value="{{ cart.count }}">
                    <a href="javascript:;" class="minus fl">-</a>
                </div>
            </li>
            <li class="col07">25.80元</li>
            <li class="col08"><a href="javascript:cart_del({{ cart.id }});">删除</a></li>
        </ul>
    {% endfor %}
    <ul class="settlements">
        <li class="col01"><input type="checkbox" name="" checked="" id="check_all"></li>
        <li class="col02">全选</li>
        <li class="col03">合计(不含运费)：<span>¥</span><em id="total">42.60</em><br>共计<b class="count">2</b>件商品</li>
        <li class="col04"><a href="{% url 'order:order' %}?">去结算</a></li>

    </ul>
{% endblock %}